<template>
	<view>
		<view class="navbar" :style="[navbarStyle]" :class="{'fixed': isFixed}">
			<view class="navbar__bg" :style="[navbarBgStyle]"></view>
			<view class="navbar__statusbar" :style="{ 'height': statusBarHeight + 'px' }"></view>
			<view class="navbar__inner" :style="[navbarInnerStyle]">
				<!-- 左侧功能 -->
				<view class="navbar-left">
					<view class="navbar-left__back" @click="goBack" v-if="!hideBack && !$slots.left">
						<text class="navbar-left__icon jicon-chevron-left"></text>
						<text class="navbar-left__text" v-if="backText">{{ backText }}</text>
					</view>
					<slot v-else name="left"></slot>
				</view>
				<!-- 标题 -->
				<view class="navbar-title" :style="[titleStyle]" v-if="title || $slots.title">
					<view v-if="title" class="navbar-title__inner ellipsis" :style="{'color': titleColor, 'fontSize': titleSize }">
						{{ title }}
					</view>
					<slot v-else name="title"></slot>
				</view>
				<!-- 右侧功能 -->
				<view class="navbar-right">
					<slot name="right"></slot>
				</view>
			</view>
		</view>
		<view class="navbar-placeholder" v-if="isFixed && !immersive" :style="{ width: '100%', height: Number(navbarHeight) + statusBarHeight + 'px' }"></view>
	</view>
</template>

<script>
	export default {
		name: 'navBar',
		data() {
			return {
				systemInfo: {},
				statusBarHeight: 0,
				menuButtonInfo: {}
			}
		},
		props: {
			isFixed: {
				type: Boolean,
				default: true
			},
			background: {
				type: Object,
				default: () => ({})
			},
			height: [String, Number],
			// 返回按钮函数
			customBack: Function,
			backUrl: String,
			hideBack: Boolean,
			backText: String,
			color: {
				type: String,
				default: '#ffffff'
			},
			white: Boolean,
			title: String,
			titleWidth: {
				type: [String, Number],
				default: '250'
			},
			leftWidth: [String, Number],
			rightWidth: [String, Number],
			titleColor: String,
			titleSize: String,
			zIndex: [String, Number],
			borderBottom: Boolean,
			// 是否沉浸式
			immersive: Boolean,
			// 滚动特效
			scrollTop: [String, Number]
		},
		computed: {
			// 导航栏样式
			navbarStyle() {
				let style = {}
				style.zIndex = this.zIndex || this.$i.zIndex.navbar
				style.color = this.color
				if (this.white) {
					style.color = '#333'
				}
				return style
			},
			// 导航栏背景
			navbarBgStyle() {
				let style = {}
				// 合并用户背景色
				style.background = this.$i.colorTheme
				Object.assign(style, this.background)
				if (this.white) {
					style.background = '#fff'
				}
				let tabbarHeight = Number(this.navbarHeight) + this.statusBarHeight
				if ((this.scrollTop || this.scrollTop === 0) && this.scrollTop < tabbarHeight ) {
					style.opacity = 1 - ((tabbarHeight - this.scrollTop) / tabbarHeight)
				} else {
					style.opacity = 1
				}
				return style
			},
			// 导航栏内部样式
			navbarInnerStyle() {
				let style = {}
				style.height = this.navbarHeight + 'px'
				// #ifdef MP
				style.marginRight = (this.systemInfo.windowWidth - this.menuButtonInfo.left) + 'px'
				// #endif
				return style
			},
			// 导航栏高度
			navbarHeight() {
				// #ifdef APP-PLUS || H5
				return this.height || 44
				// #endif
				// #ifdef MP
				let height = this.systemInfo.platform == 'ios' ? 44 : 48
				return this.height || height
				// #endif
			},
			// 标题样式
			titleStyle() {
				let style = {}
				if (this.leftWidth && this.rightWidth) {
					style.left = uni.upx2px(this.leftWidth) + 'px'
					style.right = uni.upx2px(this.rightWidth) + 'px'
				} else {
					style.left = (this.systemInfo.windowWidth - uni.upx2px(this.titleWidth)) / 2 + 'px'
					style.right = (this.systemInfo.windowWidth - uni.upx2px(this.titleWidth)) / 2 + 'px'
					// #ifdef MP
					const rightButtonWidth = this.systemInfo.windowWidth - this.menuButtonInfo.left
					let right = (this.systemInfo.windowWidth - uni.upx2px(this.titleWidth)) / 2 - rightButtonWidth
					style.right = right > 0 ? right + 'px' : '10px'
					// #endif
				}
				return style
			}
		},
		mounted() {
			this.systemInfo = uni.getSystemInfoSync()
			this.statusBarHeight = this.systemInfo.statusBarHeight
			// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			// #endif
		},
		methods: {
			goBack() {
				if (this.customBack) {
					// #ifdef H5
					this.customBack()
					// #endif
					// #ifndef H5
					this.customBack.bind(this.$parent)()
					// #endif
				} else {
					let url = this.backUrl
					this.$f.navigateBack(url)
					// uni.navigateBack()
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.navbar {
		position: relative;
		width: 100%;
		&.fixed {
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			z-index: 990;
		}
		&__bg {
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			z-index: -1;
		}
		&__statusbar {
			width: 100%;
		}
		&__inner {
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: relative;
		}
		.navbar-left {
			display: flex;
			align-items: center;
			flex: 1;
			padding: 0 14rpx 0 24rpx;
			&__back {
				display: flex;
				align-items: center;
				padding: 14rpx 0;
			}
			&__icon {
				font-size: 20px;
			}
			&__text {
				padding-left: 2px;
			}
		}
		.navbar-title {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;
			flex: 1;
			position: absolute;
			left: 0;
			right: 0;
		}
		.navbar-right {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			padding: 0 24rpx 0 14rpx;
		}
	}
</style>
